<template>
  <div class="left">
    <p
      v-for="item in list"
      :key="item.id"
      :class="{checked: item.checked , active:item.checked && power}"
      @mousedown="$emit('keyDown', { id: item.id, checked: true})"
      @mouseup="$emit('keyDown', { id: item.id, checked: false})"
    >{{item.keyTrigger}}</p>
  </div>

</template>

<script>
export default {
    props:['list','power'],
    methods:{
        // 调用键盘事件 和 销毁键盘事件  函数
        keydown(e) {
            const item = this.list.find(v => v.keyCode === e.keyCode)
            if(item) {
                this.$emit('keyDown', { id: item.id, checked: true})
            }
        },
        keyup(e) {
            const item = this.list.find(v => v.keyCode === e.keyCode)
            if(item) {
                this.$emit('keyDown', { id: item.id, checked: false})
            }
        }
     },
    created() {
        document.addEventListener('keydown',this.keydown)
        document.addEventListener('keyup',this.keyup)
    },
    beforeDestroy() {
        document.removeEventListener('keydown',this.keydown)
        document.removeEventListener('keydown',this.keyup)
    }
}
</script>

<style lang="scss" scoped>
.left {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  p {
    width: calc((100% - 20px) / 3);
    margin-right: 10px;
    margin-bottom: 10px;
    height: 100px;
    background: #8b8b8b;
    text-align: center;
    line-height: 100px;
    user-select: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 3px 0px;
    &:nth-child(3n) {
      margin-right: 0;
    }
    &.checked {
      box-shadow: none;
    }
    &.active {
      background: orange;
    }
  }
}

</style>